﻿@page "/Image-Cropper"

@using System.Diagnostics.CodeAnalysis
 @inject IJSRuntime JS

<style>
    .cropper-container {
        direction: ltr;
        font-size: 0;
        line-height: 0;
        position: relative;
        -ms-touch-action: none;
        touch-action: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: 600px;
        height: 600px;
        max-height: 600px;
        max-width: 600px;
    }

        .cropper-container img {
            image-orientation: 0deg;
            display: block;
            height: 100%;
            max-height: none !important;
            max-width: none !important;
            min-height: 0 !important;
            min-width: 0 !important;
            width: 100%
        }

    .cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0
    }

    .cropper-canvas, .cropper-wrap-box {
        overflow: hidden
    }

    .cropper-drag-box {
        background-color: #fff;
        opacity: 0
    }

    .cropper-modal {
        background-color: #000;
        opacity: .5
    }

    .cropper-view-box {
        display: block;
        height: 100%;
        outline: 1px solid #39f;
        outline-color: rgba(51,153,255,.75);
        overflow: hidden;
        width: 100%
    }

    .cropper-dashed {
        border: 0 dashed #eee;
        display: block;
        opacity: .5;
        position: absolute
    }

        .cropper-dashed.dashed-h {
            border-bottom-width: 1px;
            border-top-width: 1px;
            height: 33.33333%;
            left: 0;
            top: 33.33333%;
            width: 100%
        }

        .cropper-dashed.dashed-v {
            border-left-width: 1px;
            border-right-width: 1px;
            height: 100%;
            left: 33.33333%;
            top: 0;
            width: 33.33333%
        }

    .cropper-center {
        display: block;
        height: 0;
        left: 50%;
        opacity: .75;
        position: absolute;
        top: 50%;
        width: 0
    }

        .cropper-center:after, .cropper-center:before {
            background-color: #eee;
            content: " ";
            display: block;
            position: absolute
        }

        .cropper-center:before {
            height: 1px;
            left: -3px;
            top: 0;
            width: 7px
        }

        .cropper-center:after {
            height: 7px;
            left: 0;
            top: -3px;
            width: 1px
        }

    .cropper-face, .cropper-line, .cropper-point {
        display: block;
        height: 100%;
        opacity: .1;
        position: absolute;
        width: 100%
    }

    .cropper-face {
        background-color: #fff;
        left: 0;
        top: 0
    }

    .cropper-line {
        background-color: #39f
    }

        .cropper-line.line-e {
            cursor: ew-resize;
            right: -3px;
            top: 0;
            width: 5px
        }

        .cropper-line.line-n {
            cursor: ns-resize;
            height: 5px;
            left: 0;
            top: -3px
        }

        .cropper-line.line-w {
            cursor: ew-resize;
            left: -3px;
            top: 0;
            width: 5px
        }

        .cropper-line.line-s {
            bottom: -3px;
            cursor: ns-resize;
            height: 5px;
            left: 0
        }

    .cropper-point {
        background-color: #39f;
        height: 5px;
        opacity: .75;
        width: 5px
    }

        .cropper-point.point-e {
            cursor: ew-resize;
            margin-top: -3px;
            right: -3px;
            top: 50%
        }

        .cropper-point.point-n {
            cursor: ns-resize;
            left: 50%;
            margin-left: -3px;
            top: -3px
        }

        .cropper-point.point-w {
            cursor: ew-resize;
            left: -3px;
            margin-top: -3px;
            top: 50%
        }

        .cropper-point.point-s {
            bottom: -3px;
            cursor: s-resize;
            left: 50%;
            margin-left: -3px
        }

        .cropper-point.point-ne {
            cursor: nesw-resize;
            right: -3px;
            top: -3px
        }

        .cropper-point.point-nw {
            cursor: nwse-resize;
            left: -3px;
            top: -3px
        }

        .cropper-point.point-sw {
            bottom: -3px;
            cursor: nesw-resize;
            left: -3px
        }

        .cropper-point.point-se {
            bottom: -3px;
            cursor: nwse-resize;
            height: 20px;
            opacity: 1;
            right: -3px;
            width: 20px
        }

            .cropper-point.point-se:before {
                background-color: #39f;
                bottom: -50%;
                content: " ";
                display: block;
                height: 200%;
                opacity: 0;
                position: absolute;
                right: -50%;
                width: 200%
            }

    .cropper-invisible {
        opacity: 0
    }

    .cropper-bg {
        background-image: url("");
        width: 600px;
        height: 600px;
        max-height: 600px;
        max-width: 600px;
    }

    .cropper-hide {
        display: block;
        height: 0;
        position: absolute;
        width: 0
    }

    .cropper-hidden {
        display: none !important
    }

    .cropper-move {
        cursor: move
    }

    .cropper-crop {
        cursor: crosshair
    }

    .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
        cursor: not-allowed
    }

    .cropper-canvas {
        width: 600px;
        height: 600px;
        transform: none;
    }
</style>


<h3>ImageCropper </h3>
<ImageCropper @ref="Cropper" Url="@images[0]" DefaultButton="false" Options="Options" ModulePath="./cropper.js" Preview="false" />
<section ignore>
    <BootstrapInputGroup>
        <Button Text="OK" OnClick="GetCropImage" />
        <Button Text="复位" OnClick="Cropper.Reset" />
        <Button Text="替换" OnClick="OnClickReplace" />
        <Button Text="Clear" OnClick="Cropper.Clear" />
        <Button Text="截图" OnClick="Crop" />
    </BootstrapInputGroup>
    <Textarea Value="@Base64" rows="3" class="mt-3" />
</section>
@code {

    [NotNull]
    ImageCropper? Cropper { get; set; }

    private string[] images = new string[] { "", "" };

    private int index = 0;

    private string? Base64 { get; set; }

    private CropperOption Options;

    private async Task OnClickReplace()
    {
        index = index == 0 ? 1 : 0;
        await Cropper.Replace(images[index]);
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Options = new CropperOption
            {
                ViewModes = CropperViewMode.fit_container_width,
                AutoCrop = false,
                Preview = ".img-preview",
                Movable = false,
                cropperDragMode = CropperDragMode.none,
                MinCanvasHeight = 600,
                MinContainerHeight = 600,
                MinCanvasWidth = 600,
                MinContainerWidth = 600,
                Zoomable = false,
            };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("import", "./cropper.js");
        if (firstRender)
        {
            //await Cropper.Clear();
            //await Cropper.SetDragMode(((int)CropperDragMode.none).ToString());
            StateHasChanged();
        }
    }

    private async Task Crop()
    {
        await Cropper.Enable();
        await Cropper.SetDragMode(CropperDragMode.crop.ToString());
        //await Cropper.Crop();
    }


    private async Task GetCropImage(MouseEventArgs args)
    {
        Base64 = await Cropper.Crop();
        await Cropper.Clear();
        await Cropper.Disable();
    }
}
